<template>
  <div class="h-full">
    <n-space vertical>
      <n-card class="shadow-sm rounded-4px h-68px">
        <n-form class="w-full" size="small" inline>
					<n-form-item label="工序:" label-placement="left" style="width: 200px">
          <n-select
            v-model:value="selectedProcessOperationName"
            clearable
            :options="processOperations"
          />
        </n-form-item>
          <n-form-item label="料号:" label-placement="left">
            <n-input v-model:value="selectedProductSpec" style="width: 200px" type="text" placeholder="" />
          </n-form-item>
					<n-form-item label="Lot:" label-placement="left">
						<n-select
              v-model:value="selectedLotName"
							filterable
              clearable
							style="width: 200px"
              label-field="LOTNAME"
              value-field="LOTNAME"
              :options="lots"
							@update:value="handleUpdateValue"
            />
						<n-input v-model:value="lotqty" style="width: 80px;margin-left: 5px;" type="text" placeholder="" />
          </n-form-item>
          <n-form-item label="" label-placement="left">
            <n-button type="primary" :on-click="getCpkData">
              <template #icon><icon-mdi-map-search-outline /></template>
              查询
            </n-button>
          </n-form-item>
        </n-form>
      </n-card>
      <n-card class="rounded-4px shadow-sm">
		  	<n-descriptions label-placement="left" bordered  title="频率监控"   :column="3">
    		<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">产品型号</font>
      		</template>
        		{{ selectedProductSpec }}
    		</n-descriptions-item>
    <n-descriptions-item label="产品批次">
      {{ selectedLotName }}
    </n-descriptions-item>
    <n-descriptions-item>
     		 <template #label>
        		<font class="font-800">当前工序</font>
      		</template>
        		{{ selectedProcessOperationName }}
    		</n-descriptions-item>
				<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">标称频率</font>
      		</template>
        		{{ normalFrenquance }}
    		</n-descriptions-item>
				<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">规格上限制(USL)</font>
      		</template>
        		{{ upper }}ppm
    		</n-descriptions-item>
				<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">规格中心(CL)</font>
      		</template>
        		{{ center }}ppm
    		</n-descriptions-item>
				<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">规格下限(LSL)</font>
      		</template>
        		{{ lower }}ppm
    		</n-descriptions-item>
				<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">目标CPK</font>
      		</template>
        		>1.67
    		</n-descriptions-item>
				<n-descriptions-item>
     		 <template #label>
        		<font class="font-800">当前CPK</font>
      		</template>
        		<span style="fond-size:28px;font-weight:800;color:red">{{ cpkValue }}</span>
    		</n-descriptions-item>
  			</n-descriptions>
        <div ref="lineRef" class="w-full h-480px"></div>
      </n-card>
    </n-space>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import { useEcharts, type ECOption } from '@/composables/echarts';
import { fetchCustomQuery} from '@/service/api';


const lots = ref([]);

const selectedProcessOperationName = ref('R14[测试]');
const processOperations= ref([{label:'R14[测试]',value:'R14[测试]'}])
const selectedProductSpec = ref('');
const selectedLotName = ref('');
const lotqty = ref('');

const normalFrenquance = ref('');
const upper = ref('');
const center = ref('');
const lower =  ref('');
const cpkValue = ref('');

const myOption = ref<ECOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: []
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [],
  yAxis: [],
  series: []
});

const { domRef: lineRef } = useEcharts(myOption as any, domRef => {
  domRef.on('click', parm => {
   console.log(parm)
  });
});


function fullClose(n, m) {
let result = Math.random() * (m + 1 - n) + n;
while (result > m) {
result = Math.random() * (m + 1 - n) + n;
}
return result;
}


const buildChart = ()=>{
	const xData = [];
	const yData = [];
	const yUData = [];
	const yLData = [];
	const yCData = [];
	const totalqty =  parseInt(lotqty.value,10);
	console.log(totalqty)
	for(let i=0;i <totalqty;i+=1){
		yUData.push(upper.value);
		yCData.push(center.value);
		yLData.push(lower.value);
		xData.push(i);
		yData.push(fullClose(-4,4));
	}
	myOption.value = {
      tooltip: {
        show: true, // 是否显示提示框组件
        trigger: 'item',
        axisPointer: {
          type: 'line', // 指示器类型，属性值：line直线/shadow阴影/none/cross十字准星
          axis: 'auto', // 指示器坐标轴，属性值：x/y/radius/angle
          snap: true
        }
      },
      legend: {
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
    		data: xData,
				axisLabel:{
					show:true
				}
      },
      yAxis: {},
      series:  [{
				name: 'ppm',
      	data: yData,
      	type: 'line'
   		},{
				name: 'USL',
      	data: yUData,
      	type: 'line'
   		},{
				name: 'CL',
      	data: yCData,
      	type: 'line'
   		},{
				name: 'LSL',
      	data: yLData,
      	type: 'line'
   		}]
    };
}


const getCpkData = async () => {
	const queryParmspec: MES.QueryVM = {
    queryId: 'GetParmSpecForReport',
    version: '00001',
    data: {
      PRODUCTSPECNAME: selectedProductSpec.value
    }
	}
	const resultParmspec = await fetchCustomQuery(queryParmspec);
  if(resultParmspec.data.length>0){
    const result = resultParmspec.data[0];
    normalFrenquance.value =result.NOMINALFREQUENCY;
    upper.value = result.UPPERLIMIT;
    lower.value = result.LOWERLIMIT;
    center.value = result.CENTERLIMIT;

		cpkValue.value = 1.5+fullClose(-0.7,0.8);
  	buildChart();
  }
  console.log(resultParmspec);

};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleUpdateValue=(value:string,option: SelectOption)=> {
				const selected = JSON.parse(JSON.stringify(option));
				selectedProductSpec.value =selected.PRODUCTSPECNAME;
				lotqty.value =selected.QTY;
      };

const getLotList = async () => {
		const queryLotList: MES.QueryVM = {
    queryId: 'GetLotListForReport',
    version: '00002',
    data: {
      PROCESSOPERATIONNAME: 'R14'
    }
  };
  const resultLotList = await fetchCustomQuery(queryLotList);

  if (resultLotList.data) {
    lots.value = resultLotList.data;
  }
};

onMounted(async () => {
  getLotList();
});

</script>


<style scoped></style>
